<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>X支付 - 后台管理 - 交易列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__ADMIN__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__ADMIN__/style/admin.css" media="all">
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-card">
            <!--头部-->
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">商户编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="uid" placeholder="请输入商户号" value="{$Request.get.uid}"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">商户名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="uidname" placeholder="请输入商户名" value="{$Request.get.uidname}"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">支付方式</label>
                        <div class="layui-input-block">
                            <select name="channel" lay-filter="channel">
                                <option value="">全部</option>
                                {volist name="code" id="vo"}
                                <option {$Request.get.channel==$vo.name ? 'selected' : '' } value="{$vo.name}">
                                    {$vo.remarks}({$vo.name})</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">支付通道</label>
                        <div class="layui-input-block">
                            <select name="channelrel" lay-filter="channelrel">
                                <option value="">全部</option>
                                {volist name="channel" id="vo"}
                                <option {$Request.get.channel==$vo.id ? 'selected' : '' } value="{$vo.id}">{$vo.name}
                                </option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            <select name="status" lay-filter="status">
                                <option value="">全部</option>
                                <option {$Request.get.status=='1' ? 'selected' : '' } value="1">下单</option>
                                <option {$Request.get.status=='2' ? 'selected' : '' } value="2">通知</option>
                                <option {$Request.get.status=='0' ? 'selected' : '' } value="0">退款</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">商品订单号</label>
                        <div class="layui-input-block">
                            <input type="text" name="trade_no" placeholder="请输入订单号" value="{$Request.get.trade_no}"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">时间范围</label>
                        <div class="layui-input-block">
                            <input autocomplete="off" type="text" name="range"
                                class="layui-input app-laydate-item-range" placeholder="请选择查询范围">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-order" lay-submit lay-filter="app-order-list-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            搜素
                        </button>
                        <!-- <button class="layui-btn  layui-bg-red layuiadmin-btn-order"  data-type="all" data-events="export">
                        <i class="layui-icon layui-icon-chart-screen layuiadmin-button-btn"></i>
                        导出
                    </button> -->
                    </div>
                </div>
            </div>
            <!--数据表-->
            <div class="layui-card-body">
                <div id='divStat' class="app-channel-btns" style="margin-bottom: 10px;">
                    <blockquote class="layui-elem-quote layui-quote-nm">
                        下单笔数：<span class="data-10 layui-badge layui-bg-gray">-</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                        下单金额：<span class="data-11 layui-badge layui-bg-gray">-</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                        支付笔数：<span class="data-20 layui-badge layui-bg-blue">-</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                        支付金额：<span class="data-21 layui-badge layui-bg-blue">-</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                        退款笔数：<span class="data-30 layui-badge layui-bg-red">-</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                        退款金额：<span class="data-31 layui-badge layui-bg-red">-</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                        交易手续费：<span class="data-40 layui-badge layui-bg-green">-</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                        支付成功率：<span class="data-50 layui-badge layui-bg-green">-</span>
                    </blockquote>
                </div>
                <table id="app-order-list" lay-filter="app-order-list"></table>
                <script type="text/html" id="buttonTpl1">
                    {{#  if(d.status == '2'){ }}
                    <button class="layui-btn layui-btn-normal layui-btn-xs">通知</button>
                    {{#  } else if(d.status == '1'){ }}
                    <button class="layui-btn layui-btn-primary layui-btn-xs">下单</button>
                    {{#  } else if(d.status == '0'){ }}
                    <button class="layui-btn layui-btn-primary layui-btn-xs">退款</button>
                    {{#  } else{ }}
                    <button class="layui-btn layui-btn-danger layui-btn-xs">未知</button>
                    {{#  } }}
                </script>
                <script type="text/html" id="buttonTpl2">
                    {{#  if(d.status == '2'){ }}
                    <button class="layui-btn layui-btn-normal layui-btn-xs">成功</button>
                    {{#  } else if(d.status == '1'){ }}
                    <button class="layui-btn layui-btn-primary layui-btn-xs">成功</button>
                    {{#  } else if(d.status == '0'){ }}
                    <button class="layui-btn layui-btn-primary layui-btn-xs">成功</button>
                    {{#  } else{ }}
                    <button class="layui-btn layui-btn-danger layui-btn-xs">失败</button>
                    {{#  } }}
                </script>
                <script type="text/html" id="table-system-order">
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details"><i
                            class="layui-icon layui-icon-edit"></i>详情</a>
                </script>
            </div>
        </div>
    </div>

    <script src="__ADMIN__/layui/layui.js"></script>
    <script>
        Date.prototype.Format = function (fmt) {
            //author: meizz   
            var o = {
                "M+": this.getMonth() + 1, //月份   
                "d+": this.getDate(), //日   
                "h+": this.getHours(), //小时   
                "m+": this.getMinutes(), //分   
                "s+": this.getSeconds(), //秒   
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度   
                "S": this.getMilliseconds() //毫秒   
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[
                        k]).length)));
            return fmt;
        }

        layui.config({
            version: 1906270008,
            base: '__ADMIN__/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'orders', 'laydate', 'table'], function () {
            var $ = layui.$,
                form = layui.form,
                laydate = layui.laydate,
                table = layui.table;


            var startDate1 = new Date(new Date().setDate(1));
            var endDate1 = new Date(new Date(new Date().setMonth(new Date().getMonth() + 1)).setDate(0));
            lay('.app-laydate-item-range').each(function () {
                laydate.render({
                    elem: this,
                    value: new Date().format("yyyy-MM-dd") + ' ~ ' + new Date().format(
                        "yyyy-MM-dd"),
                    range: '~',
                    trigger: 'click',
                    btns: ['confirm'],
                    extrabtns: [{
                            id: 'today',
                            text: '当天',
                            range: [new Date(), new Date()]
                        },
                        {
                            id: 'thismonth',
                            text: '当月',
                            range: [startDate1, endDate1]
                        },
                    ]
                });
            });

            //监听搜索
            $divStat = $('#divStat')
            form.on('submit(app-order-list-search)', function (data) {
                var field = data.field;

                //执行重载
                table.reload('app-order-list', {
                    loading: false,
                    url: "getList",
                    where: field,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });

                $.post("getStat", field, function (result) {
                    if (result && result.data) {
                        if (result.data.totalCount) $divStat.find('.data-10').text(parseInt(
                            result.data.totalCount));
                        else $divStat.find('.data-10').text('-');

                        if (result.data.totalAmount) $divStat.find('.data-11').text(parseFloat(
                            result.data.totalAmount).toFixed(2));
                        else $divStat.find('.data-11').text('-');

                        if (result.data.payCount) $divStat.find('.data-20').text(parseInt(result
                            .data.payCount));
                        else $divStat.find('.data-20').text('-');

                        if (result.data.payAmount) $divStat.find('.data-21').text(parseFloat(
                            result.data.payAmount).toFixed(2));
                        else $divStat.find('.data-21').text('-');

                        if (result.data.rejectCount) $divStat.find('.data-30').text(parseInt(
                            result.data.rejectCount));
                        else $divStat.find('.data-30').text('-');

                        if (result.data.rejectAmount) $divStat.find('.data-31').text(parseFloat(
                            result.data.rejectAmount).toFixed(2));
                        else $divStat.find('.data-31').text('-');

                        if (result.data.rateAmount) $divStat.find('.data-40').text(parseFloat(
                            result.data.rateAmount).toFixed(2));
                        else $divStat.find('.data-40').text('-');

                        var totalCount = parseInt('0' + result.data.totalCount);
                        var payCount = parseInt('0' + result.data.payCount);
                        if (payCount > 0 && totalCount > 0) $divStat.find('.data-50').text((
                            parseFloat(payCount / totalCount) * 100).toFixed(2) + '%');
                        else $divStat.find('.data-50').text('-');
                    }
                });

            });

            setTimeout(() => {
                $('[lay-filter="app-order-list-search"]').click();
            }, 500);
        });
    </script>
</body>

</html>